{% extends 'layout.html' %}

{% block content %}
<div id="content">

    <div class="search_bar clearfix">
        <a href="#" class="logo fl"><img src="/static/images/logo.png" class="logo-img"></a>

        <div>
            <div class="navbar clearfix">
                <span></span>
                <ul class="subnav" style="display: flex; justify-content: center; align-items: center; margin: 0 auto;">
                    {% for cag in categories %}
                    <li>
                        <a href="/goods/?cag={{ cag.id }}&page=1" class="cag-link">
                            <p>{{ cag.cag_name }}</p>
                            <img src="/static/{{ cag.cag_img }}" class="cag-img">
                        </a>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        <hr>
        <div class="breadcrumb">
            <a href="#">全部分类</a>
            <span></span>
            <a href="/goods/?cag={{ goods_data.goods_cag_id }}&page=1">{{ goods_data.goods_cag.cag_name }}</a>
            <span></span>
            <a href="#">商品详情</a>
        </div>
        <div class="guest_cart fr">
            <a href="/cart/show_cart/" class="goods_name fl"><img src="/static/cag/cart-off.png">进入购物车</a>
            <div class="goods_count fl">{{ cart_goods_count }}件</div>
        </div>

        <div class="goods_detail_con clearfix" style="display: flex;">
            <div class="goods_detail_pic">
                <img src="/static/goods/{{ goods_data.goods_img }}" style="width: 40px; height: 30px;">
            </div>
            <div class="goods_detail_list fr" style="margin-left: 30px; margin-top: 50px;">
                <h3>{{ goods_data.goods_name }}</h3>
                <div class="prize_bar">
                    <!-- <span class="show_prize">¥<em>{{ goods_data.goods_price }}</em></span> -->
                </div>
                <div class="goods_num clearfix">
                    <div class="num_name">数量:</div>
                    <input type="button" value="-" class="minus">
                    <input type="text" class="num_show fl" value="1" disabled>
                    <input type="button" value="+" class="plus">
                </div>
                <form action="/cart/add/" method="post">
                    <input type="hidden" name="goods_id" value="{{ goods_data.id }}">
                    <input type="hidden" name="goods_count" value="1" class="goods_count_input">
                    <button type="submit" class="add_to_cart">加入购物车</button>
                </form>
                <div class="operate_btn">
                    <a href="/cart/show_cart/?id={{ goods_data.id }}" class="add_cart" id="add_cart">加入收藏</a>
                </div>
            </div>
        </div>
    </div>

    <div>
        <ul>
            <li class="active">收藏的宝贝：</li>
        </ul>
        <div>
            <dl>
                <dd>{{ goods_data.goods_desc }}</dd>
            </dl>
        </div>
    </div>
    <div class="footer">
        <div class="foot_list">
            <a>开发小组联系电话：</a>
        </div>
    </div>

</div>


<style>
    /* 外部 CSS 文件引用，这里仅保留内联样式作为示例 */
    .logo-img {
        height: 30px;
        width: 60px;
    }
    .cag-link {
        text-decoration: none;
    }
    .cag-img {
        width: 60px;
        height: 50px;
        border-radius: 11px;
        border: 1px solid #ff008c;
    }
</style>
{% endblock %}